<template>
  <v-card>
    <v-toolbar flat color="blue" dark height="50">
      <v-spacer></v-spacer>
      <v-toolbar-title>创建活动</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-container class="pa-10">
      <!-- 标题 -->
      <v-card flat>
        <h4 class="my-2">标题</h4>
        <v-text-field
          hide-details=""
          placeholder="尽量言简意赅"
          dense
          outlined
          v-model="activity.title"
        ></v-text-field>
      </v-card>
      <!-- 详情 -->
      <v-card class="mt-5" flat>
        <h4 class="my-2">活动详情</h4>
        <v-textarea
          placeholder="描述活动内容详情"
          outlined
          auto-grow
          v-model="activity.description"
        ></v-textarea>
      </v-card>
      <!-- 时间 -->
      <v-card flat>
        <h4 class="my-2">时间</h4>
        <v-row>
          <v-col>
            <!-- 开始时间 -->
            <v-text-field
              label="开始时间（格式: 2021-12-31 16:40）"
              placeholder="开始时间（格式: 2021-12-31 16:40）"
              dense
              outlined
              v-model="activity.starttime"
            ></v-text-field>
          </v-col>
          <v-col>
            <!-- 结束时间 -->
            <v-text-field
              label="结束时间（格式: 2021-12-31 16:40）"
              placeholder="结束时间（格式: 2021-12-31 16:40）"
              outlined
              dense
              v-model="activity.endtime"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-card>
      <!-- 地点 -->
      <v-card flat>
        <h4 class="my-2">地点</h4>
        <v-row>
          <v-col>
            <!-- 出发地 -->
            <v-text-field
              label="从哪里出发"
              placeholder="从哪里出发"
              dense
              outlined
              v-model="activity.from"
            ></v-text-field>
          </v-col>
          <v-col>
            <!-- 目的地 -->
            <v-text-field
              label="输入活动的目的地"
              placeholder="输入活动的目的地"
              outlined
              dense
              v-model="activity.to"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-card>
      <!-- 类别、人数、信用值 -->
      <v-card class="mt-0" flat>
        <h4 class="my-2">类别和人数限制</h4>
        <v-row>
          <v-col>
            <!-- 类别 -->
            <v-select
              :items="types"
              label="类别"
              placeholder="类别"
              dense
              outlined
              v-model="activity.typ_e"
            ></v-select>
          </v-col>
          <v-col>
            <!-- 人数限制 -->
            <v-text-field
              hide-details=""
              label="人数上限"
              placeholder="人数上限"
              outlined
              dense
              v-model="activity.sum"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-card>
      <!-- 提交按钮 -->
      <v-row class="mt-5" flat justify="center">
        <v-col class="col-2"
          ><v-btn color="blue" dark block @click="createActivity"
            >提交</v-btn
          ></v-col
        >
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
import axios from "axios";

export default {
  name: "Create",
  data() {
    return {
      activity: {
        id: null,
        title: "",
        from: "",
        to: "",
        starttime: "",
        endtime: "",
        description: "",
        currents: 1,
        sum: "",
        typ_e: "",
      },
      types: ["运动", "出行", "其他"],
    };
  },
  methods: {
    // 创建活动
    async createActivity() {
      await axios.post("activities/create", this.activity).then((res) => {
        this.$router.push("activities/" + res.data.activity.id);
      });
    },
  },
};
</script>

<style>
</style>